<template>
	<view class="all">
	<!-- 头像区 -->
	<view class="avaborder">
		<view class="avapic"><u-avatar :src="src" mode="square" :show-sex="sex"></u-avatar></view>
		<view>
			<view style="margin-left: 50rpx; margin-top:45rpx;"><text>{{acName}}</text></view>
			<view style="margin-left: 50rpx; margin-top:10rpx;"><text>{{acDepartment}}</text></view>
		</view>
	</view>
	<!-- <view class="clock">
		<u-image mode="aspectFill" width="90%" height="600" src="../../static/clock/normal_u14.svg"></u-image>
	</view> -->
	<!-- 打卡区域 -->
	<view id="container">
		<view style="justify-content: center;height: 800rpx">
			<view style="display: flex;justify-content: center;">
				<image src="../../static/clock/cd.png" 
				:class="{'rotate360':showAnimate}" @animationend="reset"
				style="position: absolute;width:700rpx;height: 700rpx;margin-top: 55rpx;" ></image>
			</view>
			<view style="position: relative;display: flex;justify-content: center;z-index: 99;">
				<view style="border-radius: 100%; height: 400rpx;width: 400rpx;
				margin-top: 200rpx;box-shadow: 0 0 40rpx 0rpx #888888" :class="clockcolor"
				@click="clockclock()">
					<view style="font-size: 60rpx;display: flex;justify-content: center;color: #FFFFFF;margin-top: 130rpx;">{{status}}</view>
					<view style="font-size: 30rpx;display: flex;justify-content: center;color: #FFFFFF;margin-top: 20rpx;font-weight: bold;">{{nowTime}}</view>
				</view>
			</view>
			
		</view>
	</view>
	<!-- 底部数据区域 -->
	<!-- <view>	
		<u-collapse :item-style="itemStyle"  event-type="close" :accordion="accordion" @change="change">
			<u-collapse-item :index="index" @change="itemChange" :title="item.head" v-for="(item, index) in itemList" :key="index">
				<view>
					<image src="../../static/Leave/exam.png"></image>
				</view>
			</u-collapse-item>
		</u-collapse>
	</view>
	 -->
	<view>
		<view>
			<view class="u-demo-wrap">
				<view class="u-demo-area">
					<u-toast ref="uToast"></u-toast>
					<!-- <u-button @click="btnClick">点击</u-button> -->
					<view style="display: flex;justify-content: center;">
					<view @click="btnClick" class="databox">
						<text style="display: flex;justify-content: center;margin-top: 25rpx;font-size: 30rpx; color: rgba(254, 200, 104, 0.82);font-weight: bold;">
							Data Table
						</text>
					</view>
					</view>
					<u-popup border-radius="60" class="box-shadow: 0rpx -5rpx 8rpx 0rpx rgba(170, 170, 170, 0.47);" v-model="show" 
						@close="close" @open="open" :mode="mode" 
						length="90%" :mask="mask"
						height="70%"
						:closeable="closeable"
						:close-icon-pos="closeIconPos"
					>
						<view>
							<view class="sticky">
							<view style="margin-top: 30rpx;">
								<view style="background-color: #ABC270;height:60rpx;width: 180rpx;border-radius: 20rpx; margin-left: 30rpx;display: flex;flex-direction: column;justify-content: center;align-items:center;font-weight: bold;">
									<text>{{thismonth}}</text>
								</view>
							</view>
							<view style="display: flex;margin-top: 15rpx;">
								<view style="width: 220rpx; ">
									<view style="display: flex;justify-content: center;font-family: 'Arial Normal', 'Arial', sans-serif;font-weight: 600;color: #473c33;font-size: 80rpx;justify-content: center;">
										<text>{{late}}</text>
									</view>
									<view style="display: flex;justify-content: center;font-family: 'Arial Normal', 'Arial', sans-serif;color: #473c33;margin-top: 20rpx;">
										<text>Late</text>
									</view>
								</view>
								<view style="width: 310rpx;">
									<view style="display: flex;justify-content: center;font-family: 'Arial Normal', 'Arial', sans-serif;font-weight: 600;color: #473c33;font-size: 80rpx;justify-content: center;">
										<text>{{wkh}}</text>
									</view>
									<view style="display: flex;justify-content: center;font-family: 'Arial Normal', 'Arial', sans-serif;color: #473c33;margin-top: 20rpx;">
										<text>Working Hours</text>
									</view>
								</view>
								<view style="width: 220rpx;">
									<view style="display: flex;justify-content: center;font-family: 'Arial Normal', 'Arial', sans-serif;font-weight: 600;color: #473c33;font-size: 80rpx;justify-content: center;">
										<text>{{leavee}}</text>
									</view>
									<view style="display: flex;justify-content: center;font-family: 'Arial Normal', 'Arial', sans-serif;color: #473c33;margin-top: 20rpx;">
										<text>Leave Early</text>
									</view>
								</view>
							</view>
							<view>
								<u-line color="#473c33" length="700rpx" margin="25rpx 25rpx"></u-line>
							</view>
							<view style="margin-left: 10rpx; width: 730rpx;">
								<scroll-view scroll-x="true" class="scroll" scroll-left="400">
									<!-- <view class="box" @click="changedate" v-for="(item,i) in date">  
										<view class="week">SUN.</view>
										<view :class="date[item]">10</view>
									</view> -->
									<view class="box">
										<view class="week">SUN.</view>
										<view :class="daypick[0]" @click="pickday(0)">{{day[0]}}</view>
									</view>
									<view class="box">
										<view class="week">MON.</view>
										<view :class="daypick[1]" @click="pickday(1)">{{day[1]}}</view>
									</view>
									<view class="box">
										<view class="week">TUE.</view>
										<view :class="daypick[2]" @click="pickday(2)">{{day[2]}}</view>
									</view>
									<view class="box">
										<view class="week">WED.</view>
										<view :class="daypick[3]"  @click="pickday(3)">{{day[3]}}</view>
									</view>
									<view class="box">
										<view class="week">THUR.</view>
										<view :class="daypick[4]" @click="pickday(4)">{{day[4]}}</view>
									</view>
									<view class="box">
										<view class="week">FRI.</view>
										<view :class="daypick[5]" @click="pickday(5)">{{day[5]}}</view>
									</view>
									<view class="box">
										<view class="week">SAT.</view>
										<view :class="daypick[6]" @click="pickday(6)">{{day[6]}}</view>
									</view>
									<view class="box">
										<view class="week">SUN.</view>
										<view :class="daypick[7]" @click="pickday(7)">{{day[7]}}</view>
									</view>
									<view class="box">
										<view class="week">MON.</view>
										<view :class="daypick[8]"  @click="pickday(8)">{{day[8]}}</view>
									</view>
									<view class="box">
										<view class="week">TUE.</view>
										<view :class="daypick[9]" @click="pickday(9)">{{day[9]}}</view>
									</view>
									<view class="box">
										<view class="week">WED.</view>
										<view :class="daypick[10]"  @click="pickday(10)">{{day[10]}}</view>
									</view>
									<view class="box">
										<view class="week">THUR.</view>
										<view :class="daypick[11]" @click="pickday(11)">{{day[11]}}</view>
									</view>
									<view class="box">
										<view class="week">FRI.</view>
										<view :class="daypick[12]" @click="pickday(12)">{{day[12]}}</view>
									</view>
									<view class="box">
										<view class="week">SAT.</view>
										<view :class="daypick[13]" @click="pickday(13)">{{day[13]}}</view>
									</view>
								</scroll-view>
							</view>
							</view>
							<view style="width: 500rpx;margin-left: 100rpx;margin-top: 40rpx;">
								<u-time-line>
									<u-time-line-item nodeTop="2" v-for="(item,index) in showrecord">
										<!-- 此处自定义了左边内容，用一个图标替代 -->
										<template v-slot:node>
											<view :class="slotcolor[item.class]">
												<!-- 此处为uView的icon组件 -->
												<u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
											</view>
										</template>
										<template v-slot:content>
											<view>
												<view class="u-order-title">{{item.status}}</view>
												<view class="u-order-time">{{item.time}}</view>
											</view>
										</template>
									</u-time-line-item>
								</u-time-line>
							
							</view>
								
							</view>
						</u-popup>
					</view>
				</view>
				
			</view>
		
		<!-- <view @click="show = true" class="databox">
			<text style="display: flex;justify-content: center;margin-top: 25rpx;font-size: 30rpx; color: rgba(254, 200, 104, 0.82);font-weight: bold;">Data Table</text>
		</view> -->
	</view>
	
	</view>
</template>

<script>
	import {clockin,clockout,getWifi,getstatus,getlist,getsum} from '../../api/Clock/clock.js'
	export default {
		data() {
			return {
				src: "../../static/homepage/boyPortrait.png",
				slotcolor:["slotcolor1","slotcolor2","slotcolor3"],
				acName: "staff001",
				number:"56",
				mac:"7C:B5:9B:34:3F:A2",
				acDepartment: "Department1",
				sex:true,
				clocktag:-1,//0为退卡状态，1为打卡状态
				status:"Clock In",
				show: false,
				late:'0',
				leavee:'0',
				wkh:'0',
				mode: 'bottom',
				mask: false, // 是否显示遮罩
				closeable: true,
				closeIconPos: 'top-right',
				datestyle:['daybefore','dayafter'],
				date:[0,0,1,0,0,0,0,0,0,0,0,0,0,0,0],
				weekday:['Sun','Mon','Tue','Wed','Thu','Fri','Sat'],
				today:10,
				nowTime:new Date(),
				thismonth:'',
				month:['','','','','','','','','','','','','',''],
				week:['','','','','','','','','','','','','',''],
				day:['','','','','','','','','','','','','',''],
				showAnimate: false,
				itemList: [{
					head: "Data Table",
					open: true,
					disabled: true
				}],
				itemStyle: {
					color: '#ffffff'
				},
				wifi:[],
				clockcolor:'outcolor',
				daypick:['daybefore','daybefore','daybefore','daybefore','daybefore','daybefore','daybefore','daybefore','daybefore','daybefore','daybefore','daybefore','daybefore','daybefore'],
				pick:13,
				clockrecord:[],
				showrecord:[],
				todaychuo:[0,0,0,0,0,0,0,0,0,0,0,0,0,0]
			}
		},
		created(){
			this.gettag(this.number)
			this.getWifis()
			this.getdd()
			this.getrecords(this.number)
			this.pickday(this.pick)
			this.getsumdata(this.pick)
		},
		beforeMount() {
			
		},
		mounted() {
		    let _this = this; // 声明一个变量指向Vue实例this，保证作用域一致
			this.timer = setInterval(() => {
			  _this.nowTime = new Date(); // 修改数据date
			  let hhh=this.nowTime.toString()
			  hhh=hhh.split(' ')
			  this.nowTime=hhh[4]
			}, 1000)
			// let hhhhhh=_this.nowTime.split()
			let hhh=this.nowTime.toString()
			hhh=hhh.split(' ')
			// console.log(hhh)
			this.nowTime=hhh[4]
		  },
		watch: {
			show(n) {
			}
		},
		beforeDestroy: function() {
		    if (this.timer) {
		      clearInterval(this.timer);
		    }
		},
		// updated() {
		// 	this.pickday(this.pick)
		// },
		methods:{
			getsumdata(pick){
				let chuo=this.todaychuo[pick]/1000
				getsum(this.number,{Date:chuo.toString()}).then(res=>{
					let data=res.data.data
					this.wkh=data.workinghours
					this.leavee=data.leaveEarly
					this.late=data.late
				})
			},
			getdd(){
				let tt=Date.parse(new Date())
				let zh=0
				let ress=''
				zh = new Date(tt)
				// console.log(zh)
				zh=zh.toString()
				ress=zh.split(' ')
				let pos=this.weekday.indexOf(ress[0])
				this.pick=pos+7
				// console.log("cdcd"+pos)
				this.todaychuo[pos+7]=tt
				this.week[pos+7]=ress[0]
				this.month[pos+7]=ress[1]
				this.day[pos+7]=ress[2]
				for(let i=pos+6;i>=0;i--){
					tt=this.todaychuo[i+1]-86400000
					// console.log(tt)
					this.todaychuo[i]=tt
					zh= new Date(tt)
					zh=zh.toString()
					ress=zh.split(' ')
					this.week[i]=ress[0]
					this.month[i]=ress[1]
					this.day[i]=ress[2]
				}
				for(let i=pos+8;i<14;i++){
					tt=this.todaychuo[i-1]+86400000
					// console.log(tt)
					this.todaychuo[i]=tt
					zh= new Date(tt)
					zh=zh.toString()
					ress=zh.split(' ')
					this.week[i]=ress[0]
					this.month[i]=ress[1]
					this.day[i]=ress[2]
				}
				this.thismonth=this.month[13]
				// console.log(this.week)
				// console.log(this.month)
				// console.log(this.day)
			},
			gettag(number){
				var num=number
				getstatus(num).then(res=>{
					// console.log(res.data.data)
					this.clocktag=res.data.data
					if(this.clocktag==0){
						console.log("status: clock out")
						this.status="Clock In"
						this.clockcolor='outcolor'
					}
					else{
						console.log("status: clock in")
						this.status="Clock Out"
						this.clockcolor='incolor'
					}
				})
			},
			getrecords(number){
				// let tt=Date.parse(new Date())
				// this.todaychuo=tt
				// tt=tt/1000
				// let num=number
				// console.log("cdcd")
				// console.log(res.data)
				let tt=this.todaychuo[13]/1000
				console.log(tt)
				getlist(number,{Date:tt.toString()}).then(res=>{
					this.clockrecord=res.data.data
					// console.log("cdcd")
					console.log(this.clockrecord)
					// console.log("getrecored")
					
					// 查看当日打卡
					let rec=this.clockrecord
					// console.log(rec.length)
					let j=0
					for(let i=0;i<rec.length;i++){
						let d=rec[i].date
						let a=d.split('-')[2]
						let to=this.day[this.pick]
						if(a==to){
							if(rec[i].clockIn!=null){
								let m={'status':'','time':'','class':0}
								m.status='Clock In'
								m.time=this.formatTime(rec[i].clockIn)
								this.showrecord[j]=m
								j++
							}
							if(rec[i].clockOut!=null){
								let n={'status':'','time':'','class':1}
								n.status='Clock Out'
								n.time=this.formatTime(rec[i].clockOut)
								this.showrecord[j]=n
								j++
							}
						}
					}
				})
			},
			formatTime(date){
			      var date = new Date(date);
			      var hh = (date.getHours() + 1 < 10 ? '0' + (date.getHours()) : date.getHours()) + ':';
			      var mm = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':';
			      var ss = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
			      return hh + mm + ss;
			    },
			getDate(date){
			      var date = new Date(date);
			      var YY = date.getFullYear() + '-';
			      var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
			      var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
			      return YY + MM + DD;
			    },
			pickday(number){
				this.daypick[this.pick]='daybefore'
				this.daypick[number]='dayafter'
				this.pick=number
				this.thismonth=this.month[number]
				// 选择数据
				this.showrecord=[]
				let rec=this.clockrecord
				// console.log(rec.length)
				let j=0
				for(let i=0;i<rec.length;i++){
					let d=rec[i].date
					let a=d.split('-')[2]
					let to=this.day[number]
					if(a==to){
						if(rec[i].clockIn!=null){
							let m={'status':'','time':'','class':0}
							m.status='Clock In'
							m.time=this.formatTime(rec[i].clockIn)
							this.showrecord[j]=m
							j++
						}
						if(rec[i].clockOut!=null){
							let n={'status':'','time':'','class':1}
							n.status='Clock Out'
							n.time=this.formatTime(rec[i].clockOut)
							this.showrecord[j]=n
							j++
						}
					}
				}
				if(this.showrecord.length==0){
					console.log("empty")
					let n={'status':'No Clock','time':'--:--','class':2}
					this.showrecord[0]=n
				}
				// console.log(this.clockrecord)
			},
			play() {
				this.showAnimate = true
			},
			reset() {
				this.showAnimate = false
			},
			addTimes(m){return m<10?'0'+m:m },
			modeChange(index) {
				this.mode =  'center';
				this.show = true;
			},
			showChange(index) {
				this.show = index == 0 ? true : false;
			},
			closePosChange(index) {
				this.closeIconPos = ['top-right'][index];
			},
			close() {
			},
			open() {
			},
			btnClick() {
				this.show = true;
			},
			clockclock(){
				this.showAnimate = true
				if(this.clocktag==0){
					this.clockIn()
				}
				else{
					this.clockOut()
				}
			},
			getWifis(){
				getWifi().then(res => {
					let haha = res.data.data
					for(let i =0;i<haha.length;i++)
					{
					  this.wifi.push(haha[i].macAddress)
					}
				 })
			},
			clockIn(){
				var params={name:this.acName,number:this.number,macAddress:this.mac};
				console.log(this.acName);
				clockin(params).then(res=>{
					console.log(res.data)
					// The current shift is not within the valid shift scheduling time, unable to punch in
					if(this.clocktag==0){
					if(res.data.message=='WiFi matching failed'){
						uni.showModal({
							title: 'Tips',
							content: 'Your WiFi address is wrong'
						});
						console.log("clock in");
					}else if(res.data.message=='It is currently in the status of card to be returned'){
						uni.showModal({
							title: 'Tips',
							content: 'You have cloced in',
						});
					}else if(res.data.message=='The shift scheduling time has passed, unable to punch in'){
						uni.showModal({
							title: 'Tips',
							content: 'You are not ar work',
						});
					}else if(res.data.message=='The current shift is not within the valid shift scheduling time, unable to punch in'){
						uni.showModal({
							title: 'Tips',
							content: 'You are not scheduled',
						});
					}else{
						this.clocktag=1
						console.log("clock in")
						this.status="Clock Out"
						this.clockcolor='incolor'
					}
					}
					
				})
			},
			clockOut(){
				var params={name:this.acName,number:this.number,macAddress:this.mac};
				console.log(this.acName);
				clockout(params).then(res=>{
					console.log(res.data)
					// The current shift is not within the valid shift scheduling time, unable to punch in
					if(this.clocktag==1){
					if(res.data.message=='WiFi matching failed'){
						uni.showModal({
							title: 'Tips',
							content: 'Your WiFi address is wrong'
						});
					}else if(res.data.message=='It is currently in clock out status'){
						uni.showModal({
							title: 'Tips',
							content: 'You have cloced out',
						});
					}else{
						this.clocktag=0
						console.log("clock out")
						this.status="Clock In"
						this.clockcolor='outcolor'
					}
					}
				})
			}
		}
	}
</script>

<style>
	.slotcolor1{
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
		background: #ABC270;
	}
	.slotcolor2{
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
		background: rgba(254, 200, 104, 0.82);
	}
	.slotcolor3{
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
		background: #555555;;
	}
	.sticky {
			/* #ifndef APP-PLUS-NVUE */
			/* display: flex; */
			position: -webkit-sticky;
			/* #endif */
			position: sticky;
			top: var(--window-top);
			z-index: 99;
			flex-direction: row;
			margin: 0px;
			border-top: 1px #f9f9f9 solid;
			border-bottom: 1px #f9f9f9 solid;
			background: #fff;
		}
	.rotate360 {
		animation: rotate360 .5s ease-out 0s;
	}
 
	@keyframes rotate360 {
		100% {
			transform: rotate(360deg);
		}
	}
	.outimg{
		position: absolute;
		width:700rpx;
		height: 700rpx;
		margin-top: 60rpx;
	}
	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}
	
	.u-order-desc {
		color: #555555;
		font-weight: bold;
		font-size: 32rpx;
		margin-bottom: 6rpx;
	}
	
	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}
	page{
		background-color:  #f2f2f2;
	}
	.avaborder{
		display: flex;
		background-color: #FFFFFF;
		border-bottom: 1px solid rgba(170, 170, 170, 0.47);
		height: 160rpx
	}
	.avapic{
		margin-left: 40rpx;
		margin-top: 40rpx;
	}
	.clock{
		object-fit: cover;
		margin-left: 65rpx;
		margin-top: 90rpx;
	}
	.databox{
		display: flex;
		justify-content: center;
		width: 600rpx;
		height: 100rpx;
		border: 1px solid rgba(170, 170, 170, 0.47);
		background-color: #FFFFFF;
		border-radius:30rpx;
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(170, 170, 170, 0.47);
	}
/* 	.content {
		padding: 0 30upx;
	} */
 
	.scroll {
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
	}
 	.box {
		display: inline-block;
		width: 80rpx;
		height: 120rpx;
/* 		background: #0062CC; */
		margin-right: 30rpx;
	}
 	.box:last-child {
		margin-right: 0;
	}
	
	.week{
		display: flex;
		justify-content: center;
		
		
	}
	
	.daybefore{
		margin-left: 10rpx;
		height: 60rpx;
		width: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20rpx;
		border-radius: 100%;
		font-size: small;
		
	}
	
	.dayafter{
		margin-left: 10rpx;
		height: 60rpx;
		width: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20rpx;
		background-color: rgba(127, 143, 83, 0.73);
		opacity: 0.69;
		border-radius: 100%;
		font-weight: bold;
		font-size: small;
		color: #ffffff;
	}
	.outcolor{
		background-image: linear-gradient(to bottom right, #cedd6c, #b7ce7e);
	}
	.incolor{
		background-image: linear-gradient(to bottom right, #f0c65c, rgba(255, 216, 149, 0.8));
	}
</style>
